<template>
  <div class="x-pagination clearfix">
    <button
      type="button"
      class="btn-prev"
      :disabled="myCurrentPage === 1"
      @click="goPage(-1)"
    >
      <SvgIcon class="iconfont" icon="icon-xiangzuo1"></SvgIcon>
      上一页
    </button>
    <ul>
      <li :class="{ active: myCurrentPage === 1 }" @click="myCurrentPage = 1">
        1
      </li>
      <li
        v-show="startAndEnd.start > 2"
        @click="myCurrentPage = startAndEnd.start - 1"
      >
        <SvgIcon class="iconfont" icon="icon-ellipsis"></SvgIcon>
      </li>
      <li
        v-for="(n, index) in startAndEnd.end - startAndEnd.start + 1"
        :key="startAndEnd.start + index"
        :class="{ active: myCurrentPage === startAndEnd.start + index }"
        @click="myCurrentPage = startAndEnd.start + index"
      >
        {{ startAndEnd.start + index }}
      </li>
      <li
        v-show="startAndEnd.end < totalPages - 1"
        @click="myCurrentPage = startAndEnd.end + 1"
      >
        <SvgIcon class="iconfont" icon="icon-ellipsis"></SvgIcon>
      </li>
      <li
        v-if="totalPages > 1"
        :class="{ active: myCurrentPage === totalPages }"
        @click="myCurrentPage = totalPages"
      >
        {{ totalPages }}
      </li>
    </ul>
    <button
      type="button"
      class="btn-next"
      :disabled="myCurrentPage >= totalPages"
      @click="goPage(1)"
    >
      <SvgIcon class="iconfont" icon="icon-xiangyou1"></SvgIcon>
      下一页
    </button>
    <span class="total">共 {{ total }} 条 </span>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Pagination',
}
</script>

<script lang="ts" setup>
import { ref, onMounted, watch, computed } from 'vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
// 接收props
const props = defineProps({
  total: {
    type: Number,
    default: 0,
  },
  pageSize: {
    type: Number,
    default: 12,
  },
  currentPage: {
    type: Number,
    default: 1,
  },
})

// 分页数据
const myCurrentPage = ref(1)
const pageSize = ref(12)
const totalPages = ref(0)

const startAndEnd = computed(() => {
  totalPages.value = Math.ceil(props.total / pageSize.value)
  if (totalPages.value <= 7) {
    // 总页数 < 7
    return {
      start: 2,
      end: totalPages.value - 1 < 1 ? 1 : totalPages.value - 1,
    }
  }
  // 当前页码 <= 2
  let start = myCurrentPage.value - 2 // 开始页码
  if (start < 2) start = 2
  let end = start + 4 // 结束页码
  // 结束页码 > 页码数 - 1
  if (end > totalPages.value - 1) {
    end = totalPages.value - 1
    start = end - 4
  }
  return {
    start,
    end,
  }
})
// 跳转至某页
const goPage = async (num: number) => {
  myCurrentPage.value += num
}

// 监视页码改变
const emit = defineEmits(['currentChange'])
watch(
  () => myCurrentPage.value,
  (newVal) => {
    emit('currentChange', newVal)
  },
  { immediate: true }
)
</script>

<style lang="less" scoped>
.x-pagination {
  margin: 20px 0;
  display: flex;
  justify-content: center;
  font-weight: 800;
  ul {
    display: flex;
    li {
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 12px;
      text-align: center;
      background-color: #f4f4f5;
      border-radius: 2px;
      margin: 0 2px;
      color: #606266;
      cursor: pointer;

      &.active {
        background-color: #a2161b;
        color: #fff;
      }
    }
  }
  .btn-prev,
  .btn-next {
    border: none;
    outline: none;
    width: 70px;
    line-height: 26px;
    height: 26px;
    cursor: pointer;
    color: #606266;
    background-color: #f4f4f5;
  }

  .btn-prev:disabled,
  .btn-next:disabled {
    color: #ccc;
    cursor: not-allowed;
  }

  .total {
    height: 24px;
    line-height: 24px;
    font-size: 13px;
    margin-left: 15px;
  }
}
</style>
